<!-- 分配角色 -->
<template>
<el-dialog title="分配角色" @close="btnCancel" :visible="showRoleDialog"> 
    <!-- 多选框组 -->
    <el-checkbox-group v-model="roleIds">
        <el-checkbox v-for="item in list" :key="item.id" :label="item.id">
            {{
          item.name
        }}
        </el-checkbox>
    </el-checkbox-group>
    <!-- footer插槽 -->
    <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
            <el-button type="primary" size="small" @click="btnOk">确定</el-button>
            <el-button size="small" @click="btnCancel">取消</el-button>
        </el-col>
    </el-row>
</el-dialog>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { getRoleList } from '@/api/setting'
import {assignRoles } from '@/api/employees'
import { getUserDetailById } from '@/api/user'
export default {
//组件名称
name: '',
//import引入的组件需要注入到对象中才能使用
components: {},
//父传子数据传递 父组件通过绑定属性来传递
props:  {
    showRoleDialog:{
        type:Boolean,
        default:false
    },
   userId:{
    type:String,
    default:null,
    required:true
   }
},
data() {
//这里存放数据
return {
list:[],//所有的角色列表
roleIds:[]//用户的角色列表
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
async getRoleList(){
   
   const {rows}= await getRoleList({page:1,pagesize:20})
//    console.log(rows);
   this.list=rows
},
// 传参是因为 父组件调用的该方法，父组件直接传参     不用this. props异步的
async getUserDetailById(id){
   const{roleIds}= await getUserDetailById(id)
   this.roleIds=roleIds
},
// 确定
 async btnOk(){
   await assignRoles({id:this.userId,roleIds:this.roleIds})
   this.$emit('update:showRoleDialog',false)
//    this.$parent.showRoleDialog=false
},
// 取消
btnCancel(){
    this.roleIds=[]
    this.$emit('update:showRoleDialog',false)

}
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
this.getRoleList()
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style  scoped>


</style>